<template>
  <div>
    <el-container>
      <el-header style="position: relative; 
      height: 50px; width: 100%;">
        <ul id="header" style="list-style-type: none;
        margin: 0px auto;padding-inline-start: 0px; overflow: hidden;
        background-color: black; color: aliceblue;">
          <li class="header_li" style="float:left;"><a href="/home">主页</a></li>
          <li class="header_li" style="float:left;"><a href="/about">关于</a></li>
          <li class="header_li" style="float:left;"><a href="/contact">联系</a></li>
          <li class="header_li" style="float:left;"><a href="/lastanalyse">最近分析</a></li>
          <el-dropdown style="float:right; margin-right: 30px;">
            <span class="el-dropdown-link">个人中心</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided >
                <a href="/" style="color: black;">注销</a></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </ul>
      </el-header>
      <el-container style="height: calc(100vh - 50px);">
          <el-aside style="width: 250px;">
              <el-menu :default-openeds="['1', '3']" :default-active="this.$router.path" router>
              <el-menu-item index="/present/main">
                <i class="el-icon-s-flag"></i>
                <span slot="title">APP信息</span>
              </el-menu-item>

              <el-menu-item index="/present/qianming">
                <i class="el-icon-s-check"></i>
                <span slot="title">签名证书</span>
              </el-menu-item>

              <el-menu-item index="/present/quanxian">
                <i class="el-icon-warning"></i>
                <span slot="title">危险动作</span>
              </el-menu-item>

            <el-menu-item index="/present/URL">
              <i class="el-icon-s-opportunity"></i>
              <span slot="title">域名</span>
          </el-menu-item>

            <el-menu-item index="/present/list">
                <i class="el-icon-menu"></i>
                <span slot="title">黑白名单</span>
            </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main >  
            <router-view/>
          </el-main>
      </el-container>
      </el-container>
  </div>

</template>

<script>

export default {
  name: 'PresentView',

}
    
</script>


<style>
li a {
  display: block;
  color: #ccc;
  text-align: center;
  padding: 0px 30px;
  text-decoration: none;
}

li a:hover {
  color: white;
}

html,body,#app,el-container{
  margin: 0px;
  padding: 0px;
  height: 100%;
}
.el-header{
  background-color: #B3C0D1;
  color: #333;
  padding: 0px ;
  text-align: center;
  line-height: 50px;
}

.el-aside {
  width: 200px;
  color: #333;
  /* text-align: center; */
  line-height: 100%;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 25px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

</style>
